<script setup>
import { ref,reactive,onBeforeMount } from 'vue'
import useRolesStore from '../../store/rolesStore'
import Dialog from './dialog.vue'

const rolesStore = useRolesStore()

const dialog = ref(null)

onBeforeMount(() => {
  // 获取角色数据
  rolesStore.getRolesAction()
})

// 新增角色
function addRole() {
  // console.log('新增角色')
  // 打开对话框
  rolesStore.openDialog()
}
// 编辑角色
function editRole(role) {
  console.log(role,'编辑角色')
  // console.log(dialog.value)
  dialog.value.editId = role.id
  dialog.value.menuTree.arr = role.menus.split(',')
  dialog.value.roleForm.rolename = role.rolename
  dialog.value.roleForm.status = role.status
  dialog.value.roleForm.menus = role.menus
  // 打开对话框
  rolesStore.openDialog()
}
// 删除角色
function confirmEvent(id) {
  // console.log(id,'删除角色')
  rolesStore.delRoleAction(id)
}

</script>

<template>
  <el-card>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/main' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>系统设置</el-breadcrumb-item>
      <el-breadcrumb-item>角色管理</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="right">
      <el-button @click="addRole" type="primary">新增角色</el-button>
    </div>
    <!-- 表格 -->
    <el-table :data="rolesStore.roleList" style="width: 100%" max-height="480">
      <el-table-column label="序号" prop="id" width="80" fixed />
      <el-table-column label="角色名称" prop="rolename" width="150" />
      <el-table-column label="可访问菜单" prop="menus" width="260" />
      <el-table-column label="角色状态" prop="status" width="120">
        <template v-slot="props">
          <el-tag type="success" size="small" v-if="props.row.status === 1">启用</el-tag>
          <el-tag type="danger" size="small" v-else>禁用</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" fixed="right" min-width="150">
        <template v-slot="props">
          <el-button type="primary" size="small" round @click="editRole(props.row)">编辑</el-button>
          <!-- <el-button type="danger" size="small" round @click="delRole(props.row.id)">删除</el-button> -->
          <!-- 气泡确认框 -->
          <el-popconfirm
            width="160px"
            title="你确定要删除吗？"
            @confirm="confirmEvent(props.row.id)"
          >
            <template #reference>
              <el-button type="danger" size="small" round>删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
  <!-- 对话框 -->
  <Dialog ref="dialog" />
</template>

<style lang="scss" scoped>
.right {
  display: flex;
  justify-content: right;
  padding: 10px 0;
}
</style>
